<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ch" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../../static/layui/css/layui.css"/>
    <!--    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>-->
    <title>参与竞拍</title>

    <script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    </script>
</head>
<body style="height: 100%">
<div class="dialog-container">
<!--  倒计时  -->
    <div class="time-cut-down">
        <div class="djs" >倒计时</div>
        <div id="cut" class="djs" style="padding-top: 2px"></div>
    </div>
<!--    -->
    <div class="big-body">
      <div class="left">
        <table class="layui-hide priceTable" id="priceList" lay-filter="test"></table>
    </div>
      <div class="right">
        <!--商品id-->
        <input style="display: none" type="text" name="commid" id="commid" lay-verify="required" autocomplete="off"
               placeholder="商品id"
               class="layui-input" th:value="${shopid}">
        <!--价格-->
        <div class="goosPrice">
            <span style="width: 80px">竞拍价格</span>
            <input style="margin-left: 10px" type="number" name="price" id="price" lay-verify="required"
                   autocomplete="off" placeholder="竞拍价格"
                   class="layui-input">
        </div>
        <!--提交价格-->
        <div class="btnBox">
            <button  class="layui-btn layui-btn-normal commitBtn" id="test1" onclick="commitPrice()">提交</button>
        </div>
    </div>
    </div>
</div>

<script type="text/javascript" src="../../static/layui/jquery.min.js"></script>
<!--<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>-->
<script src="../../static/layui/layui.js"></script>
<script src="../../static/js/dialog.js"></script>
<script type="text/javascript" th:inline="none">
        layui.use(['table', 'jquery', 'element'], function () {
            var goodsId = document.getElementById('commid').value
            var table = layui.table;
            table.render({
                elem: "#priceList",
                // height:300,
                url: basePath + '/auction/getAuctionLog/' + goodsId,
                cols: [[
                    {field: "username", title: "出价人", width: 100, align: 'center'},
                    {field: "createTime", title: "出价时间", width: 100, align: 'center'},
                    {field: "bid", title: "价格", width: 100, align: 'center'}
                ]],
            })
        })

    //提交
    function commitPrice() {
        var goodsId = document.getElementById('commid').value
        var goodPrice = document.getElementById('price').value
        var userid = window.localStorage.getItem('layim')
        console.log(goodsId, goodPrice, userid)
        $.ajax({
            type: "POST",
            url:basePath + "/auction/addAuction/"+goodsId+"/"+goodPrice,
            data: {},
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success :function (data) {
                if(!data.code){
                    layer.msg("竞拍成功", {
                        time: 1000,
                        // icon: 1,
                        offset: '100px'
                    },function(){
                        document.getElementById('price').value = ''
                        }
                    )
                }else{
                    layer.msg(data.msg,{
                        time:1000,
                        // icon: 5,
                        offset: '100px'
                    })
                }
            },error:function () {
                layer.msg("请输入竞拍金额", {
                    time: 1000,
                    icon: 2,
                    offset: '100px'
                });
            }
        })
    }
   // 模拟倒计时
    function cutdown(){
        let now = new Date()
        let hour = now.getHours()
        let min = now.getMinutes()
        let sec = now.getSeconds()
        let h = 24 - hour;
        if (min > 0 || sec > 0) {
            h -= 1
        }
        let m = 60 - min;
        if (sec > 0) {
            m -= 1
        }
        if (m == 60) {
            m = 0
        }
        let s = 60 - sec;
        if (s == 60) {
            s = 0
        }
        h = h.toString();
        m = m.toString();
        s = s.toString();
        if (h.length == 1) {
            h = '0' + h
        }
        if (m.length == 1) {
            m = '0' + m
        }
        if (s.length == 1)
            s = '0' + s
        result = h + ':' + m + ':' + s
        return result
        // console.log(result,123)
    }
    // cutdown()
        setInterval(function () {
            cut.innerHTML = cutdown();
        }, 1000)
</script>
</body>


<style>
    body{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dialog-container {
        display: flex;
        flex-direction: column;
    }

    .goosPrice {
        display: flex;
        align-items: center;
    }
    .left{
        height: 100%;
        /*padding-right: 20px;*/
    }
    .priceTable{
        height: 100%;
    }
    .right{
        display: flex;
        flex-direction: column;
        align-self: flex-end;

    }
    .btnBox{
        /*width: 50px;*/
        padding-top: 20px;
        display: flex;
        flex-direction: row-reverse;
    }
    .commitBtn{
        /*width: 100%;*/
    }
    .time-cut-down{
        font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
        /*border: 1px solid #e6e6e6;*/
        display: flex;
        width: 300px;
        height: 100%;
        position: relative;
        margin-bottom: 10px;
    }
    /*#cut{*/
    /*    display: block;*/
    /*}*/
    .djs{
        /*border: 1px solid black;*/
        font-size: 16px;
        display: flex;
        height: 100%;
        /*display: block;*/
        margin-right: 20px;
    }
</style>
</html>